import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { PC_TERMINAL_WIDTH } from '../assets/js/constant'

const { width } = useWindowSize()

// export const isMobileTerminal = computed(() => width.value < PC_TERMINAL_WIDTH)

export const isMobileTerminal = computed(() => {
  // 方式1：
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
})

/**
 * 初始化 rem 基准值，最大为 40px
 */
// export const useREM = () => {
//   const MAX_FONT_SIZE = 40
//   document.addEventListener('DOMContentLoaded', () => {
//     const html = document.querySelector('html')
//     // 获取根元素 fontSize 标准，屏幕宽度 / 10。（以 Iphone 为例 Iphone 6 屏幕宽度为 375，则标准 fontSize 为 37.5）
//     let fontSize = window.innerWidth / 10
//     // 获取到的 fontSize 不允许超过我们定义的最大值
//     fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
//     // 定义根元素（html）fontSize 的大小 （rem）
//     html.style.fontSize = fontSize + 'px'
//   })
// }

export const useREM = () => {
  const html = document.querySelector('html')
  const defaultSize = 100
  const MAX_FONTSIZE = 110
  document.addEventListener('DOMContentLoaded', () => {
    html.style.fontSize = `${defaultSize}px`
  })
  if (!isMobileTerminal.value) return
  window.addEventListener('resize', () => {
    const proportion = window.innerWidth / 375
    let fontSize = defaultSize * proportion
    if (fontSize > MAX_FONTSIZE) {
      fontSize = MAX_FONTSIZE
    }
    html.style.fontSize = `${fontSize}px`
  })
}
